<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pott 行程分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#container {width: 100%;height: 100%;overflow: auto;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=NZGsCE19I0Sto9AxxBDg1VSv1EgOsNH1"></script>
	
	<script type="text/javascript" src="//api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
	<fieldset class="table-search-fieldset">
	    <legend>搜索信息</legend>
	    <div style="margin: 10px 10px 10px 10px">
	        <form class="layui-form layui-form-pane" action="">
	            <div class="layui-form-item">
	                <div class="layui-inline">
	                    <label class="layui-form-label">UID</label>
	                    <div class="layui-input-inline">
	                        <input type="text" name="uid" autocomplete="off" class="layui-input">
	                    </div>
	                </div>

	                <div class="layui-inline">
	                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit  lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
	                </div>
					
					<span class="layui-badge layui-bg-blue">B站:一碗炒饭啊 uid:85497962</span>
					<span class="layui-badge layui-bg-green">公众号:给我一碗炒饭</span>
					<img src="../images/gzh.jpeg" style="width: 6%;"></img>
	            </div>
	        </form>
	    </div>
	</fieldset>
	
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	    <legend>基础信息</legend>
	</fieldset>
	<form class="layui-form" action="">
	    <div class="layui-form-item">
	        <label class="layui-form-label">昵称:</label>
	        <div class="layui-input-block">
	            <div class="layui-form-mid layui-word-aux" id="nickname">0</div>
	        </div>
	    </div>
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">注册地:</label>
				<div class="layui-input-block">
					<div class="layui-form-mid layui-word-aux" id="reg_city">0</div>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">注册时间:</label>
				<div class="layui-input-block">
					<div class="layui-form-mid layui-word-aux" id="reg_time">0</div>
				</div>
			</div>
		</div>
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">粉丝数:</label>
				<div class="layui-input-block">
					<div class="layui-form-mid layui-word-aux" id="fans">0</div>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">关注数:</label>
				<div class="layui-input-block">
					<div class="layui-form-mid layui-word-aux" id="follow">0</div>
				</div>
			</div>
		</div>
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">去过的城市:</label>
				<div class="layui-input-block">
					<div class="layui-form-mid layui-word-aux" id="gone_city">0</div>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">照片数量:</label>
				<div class="layui-input-block">
					<div class="layui-form-mid layui-word-aux" id="photo_num">0</div>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">打卡:</label>
				<div class="layui-input-block">
					<div class="layui-form-mid layui-word-aux" id="relation">0</div>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">被点赞:</label>
				<div class="layui-input-block">
					<div class="layui-form-mid layui-word-aux" id="be_like_mark_num">0</div>
				</div>
			</div>
		</div>
				
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		    <legend>旅行信息</legend>
		</fieldset>
		
		<table id="demo" lay-filter="test"></table>
		
	</form>
<hr class="layui-bg-orange">


<form class="layui-form" action="">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label" >到达国家:</label>
				<div class="layui-input-block">
					<div class="layui-form-mid layui-word-aux" id="country_num">0</div>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">到达城市:</label>
				<div class="layui-input-block">
					<div class="layui-form-mid layui-word-aux" id="city_num">0</div>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">到达区域:</label>
				<div class="layui-input-block">
					<div class="layui-form-mid layui-word-aux" id="area">0</div>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">到达地点:</label>
				<div class="layui-input-block">
					<div class="layui-form-mid layui-word-aux" id="address_num">0</div>
				</div>
			</div>
		</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">到达国家:</label>
			    <div class="layui-input-block">
			        <div class="layui-form-mid layui-word-aux"  id="country"> </div>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">到达城市:</label>
			    <div class="layui-input-block">
			        <div class="layui-form-mid layui-word-aux" id="city"> </div>
			    </div>
			</div>
	</form>	
	<hr class="layui-bg-orange">
<div id="container" style="width: 100%;height: 80%; margin: 0 auto;"></div> 	
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs data-count-down">下载图片</a>
			<a class="layui-btn layui-btn-xs layui-btn-warm data-count-show">地图标点</a>
        </script>
<script>
function init(uid){
	
}
function show(r){

layui.use('table', function(){
 var table = layui.table;
  var $ = layui.jquery;
		$(".data-count-down").on("click", function () {
		
		    layer.msg('啊这，我不想写了，去查看图片里面右键保存吧～', {icon: 6}); 
		
		    return false;
		});
		
		$(".data-count-show").on("click", function () {
		
		    layer.msg('啊这，我也不想写了', {icon: 6}); 
		
		    return false;
		});

 
  $('#nickname').html(r.userdata['nickName']);
  $('#reg_city').html(r.userdata['reg_city']);
  $('#reg_time').html(r.userdata['reg_time']);
  $('#fans').html(r.userdata['fans']);
  $('#follow').html(r.userdata['follow']);
  $('#gone_city').html(r.userdata['gone_city']);
  $('#photo_num').html(r.userdata['photo_num']);
  $('#be_like_mark_num').html(r.userdata['be_like_mark_num']);
  $('#relation').html(r.userdata['relation']);
  
  $('#country_num').html(r.goneCitydata['country_num']);
  $('#city_num').html(r.goneCitydata['city_num']);
  $('#address_num').html(r.goneCitydata['address_num']);
  $('#photo_num').html(r.goneCitydata['photo_num']);
  $('#country').html(r.goneCitydata['country']);
  $('#city').html(r.goneCitydata['city']);
  $('#area').html(r.goneCitydata['area']);
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,data:r.data
	,page: false
	,limit:10000
    ,cols: [[ //表头
	{field: 'pstime', title: 'ID', width:100, sort: true, fixed: 'left',
	templet: function(d){
		return d.LAY_INDEX
	}
	}
      ,{field: 'pstime', title: '拍摄时间', width:200, sort: true}
      ,{field: 'country', title: '国家', width:80}
      ,{field: 'province', title: '省份', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'area', title: '区域', width: 177}
      ,{field: 'address', title: '地址', width: 250, sort: true}
      ,{field: 'lng', title: '经度', width: 120, sort: true}
      ,{field: 'lat', title: '纬度', width: 120}
	  ,{field: 'distance', title: '距离', width: 120}
	  ,{field: 'desc', title: '描述', width: 200}
      ,{field: 'imageurl', title: '查看图片', width: 120, sort: true,
	  templet: function(d){
		  return '<span class="layui-badge layui-bg-blue" onclick=\'showimage("'+d.imageurl+'")\'>查看图片</span>'
	  }
	  },
	  ,{title: '操作', minWidth: 80, templet: '#currentTableBar', fixed: "right", align: "center"}
    ]],
	done: function(res, curr, count){
		
	    // 百度地图API功能
	    var map = new BMapGL.Map("container");
	    var point = new BMapGL.Point(116.404, 39.925);
	    map.centerAndZoom(point, 4);
	    map.enableScrollWheelZoom();
	    function startLushu() {
	        var fly = '';
	        lushu = new BMapGLLib.LuShu(map, polyline.getPath(), {
	            geodesic: true,
	            autoCenter: true,
	            icon: new BMapGL.Icon(fly, new BMapGL.Size(48, 48), { anchor: new BMapGL.Size(24, 24) }),
	            speed: 1000000,
	            enableRotation: true
	        });
	        setTimeout('lushu.start()', 4000);
	    }
	    var path = [];
		for(var i=0;i<res['data'].length;i++){
			lng=res['data'][i]['lng'];
			lat=res['data'][i]['lat'];
			var point = new BMapGL.Point(lng, lat);
			var opts = {
				  position : point,    // 指定文本标注所在的地理位置
				  offset   : new BMapGL.Size(30, -30)    //设置文本偏移量
				}
			var label = new BMapGL.Label("["+(i+1)+"]"+res['data'][i]['address'], opts);  // 创建文本标注对象
			label.setStyle({
				color : 'red',
				fontSize : '12px',
				height : '20px',
				lineHeight : '20px',
				fontFamily: '微软雅黑'
			});
			map.addOverlay(label); 
			path.push(new BMapGL.Point(lng,lat));
		}
	    var polyline = new BMapGL.Polyline(path, {
	        clip: false,
	        geodesic: true,
	        strokeWeight: 3
	    });
	    map.addOverlay(polyline);
	    startLushu();
	 
	 
	  /**
	  // GL版命名空间为BMapGL
	      // 按住鼠标右键，修改倾斜角和角度
	  	var bmap = new BMapGL.Map("container");    // 创建Map实例
	  	bmap.centerAndZoom(new BMapGL.Point(116.404, 39.925), 4);  // 初始化地图,设置中心点坐标和地图级别
		  bmap.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
		  var point = [];
		  for(var i=0;i<res['data'].length;i++){
			lng=res['data'][i]['lng'];
			lat=res['data'][i]['lat'];
			var pointt = new BMapGL.Point(parseFloat(lng).toFixed(6), parseFloat(lat).toFixed(6));	
			point.push(pointt);
			var opts = {
				  position : pointt,    // 指定文本标注所在的地理位置
				  offset   : new BMapGL.Size(30, -30)    //设置文本偏移量
				}
			var label = new BMapGL.Label("["+(i+1)+"]"+res['data'][i]['formattedAddress'], opts);  // 创建文本标注对象
			label.setStyle({
				color : 'red',
				fontSize : '12px',
				height : '20px',
				lineHeight : '20px',
				fontFamily: '微软雅黑'
			});
			bmap.addOverlay(label); 
		  }
		  console.log(point);
		  var pl = new BMapGL.Polyline(point);
		  console.log(pl);
		  trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
		  				  overallView: true,
		  				  tilt: 30,
		  				  duration: 20000,
		  				  delay: 300
		  });
		  trackAni.start();
		  **/
	   }
  });
  
});}
</script>

<script>
	function showimage(url){
		var index = layer.open({
		    title: '查看图片',
		    type: 2,
		    shade: 0.2,
		    maxmin:true,
		    shadeClose: true,
		    area: ['45%', '45%'],
		    content: url,
		});
	}
	
    layui.use(['form'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
			, $ = layui.jquery;

		form.on('submit(data-search-btn)', function (data) {
		    
			$.ajax({
				type: 'GET',
				url:'/api/getinfo/'+data.field.uid,
				dataType:"JSON",
				success: function (r) {
					if(r.code=="0000"){
						layer.msg('获取数据成功', {icon: 1,time: 2000});
						 console.log(r);
						show(r);
					}else{
						layer.msg(r.msg, {icon: 6}); 
					}
				}
			});
		    return false;
		});
		
		
       

    });
</script>

<script type="text/javascript">

</script>
</body>
</html>